<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="multipleTable"
      highlight-current-row
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="name" label="试题名称" sortable>
        <template slot-scope="scope" class="rowText">
          <i></i>
          <div class="icon">
            <img class="fileimg" src="@/assets/css/images/exam.svg" alt="" />
          </div>
          <div class="text">
            <b class="rowname" @click="preview(scope.row.name)">{{
              scope.row.name
            }}</b
            ><br /><small class="small">{{ scope.row.status }}</small>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="examName"
      :visible.sync="examVisible"
      :close-on-click-modal="false"
      center
    >
    <final></final>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="handleUpdate()"
          >提 交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import final from "./final.vue";
export default {
  components: {
    final,
  },
  data() {
    return {
      tableData: [
        {
          name: "计算机组成原理19-20-2期末试卷A",
        },
        {
          name: "计算机组成原理19-20-2期末试卷B",
        },
        {
          name: "期中测试",
        },
        {
          status: "已完成",
          name: "单元测试",
        },
      ],
      examVisible: false,
      examName: "",
    };
  },
  methods: {
    preview(name) {
      this.examVisible = true;
      this.examName = name;
    },
    handleUpdate() {
      this.$message.success("提交成功！");
      setTimeout(() => {
        this.examVisible = false;
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.icon,
.text {
  display: table-cell;
  vertical-align: middle;
  margin-right: 5px;
}
.fileimg {
  width: 40px;
  height: 37px;
}
.rowname,
.small {
  margin-top: -10px;
  margin-left: 15px !important;
  cursor: pointer;
}
</style>
